<template>
  <div class="contain">
    <div class="header">

        <h2 class="header-m">专题精选</h2>

    </div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="goods-content">
        <div v-for="item in list" :key="item.id" class="newGoods">
          <ul class="newGoodsBox">
            <li v-for="el in item" :key="el.id" class="newGoods-item" @click="topList(el.id)">
              <img class="img" :src="el.scene_pic_url" alt="" />
              <div class="new-txt">
                <div class="newGoods-name">
                  <span>{{ el.title }}</span>
                </div>
                <div class="newGoods-brief">
                  <span> {{ el.subtitle }}</span>
                </div>
                <div class="newGoods-price">
                  <span>${{ el.price_info }}起</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { listaction } from '@/api/topci/topic'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
  name: 'TopicApi',
  setup () {
    const router = useRouter()
    const list = ref([])
    const page = ref(1)
    const loading = ref(false)
    const finished = ref(false)
    const topList = (id) => {
      console.log(id)
      router.push({ path: '/topic/topicList', query: { id: id } })
    }
    const onLoad = () => {
      listaction({
        page: page.value
      }).then(res => {
        console.log('res', res)
        list.value.push(res.data)
        // 加载状态结束
        loading.value = false
        page.value++
        console.log('list', list)
        // 数据全部加载完成
        if (res.page >= res.total) {
          finished.value = true
        }
      })
    }

    return {
      list,
      onLoad,
      loading,
      finished,
      topList,
      page
    }
  }
}
</script>

<style lang="scss" scoped>
@import './scss/index.scss'
</style>
